<template>
  <div id="app">
    <h1>
      state：
      {{ $store.state.n }}
      --
      {{ cn }}
      --
      {{ n }}
      --
      {{ nn }}
    </h1>
    <h2>getters： {{ $store.getters.money }}</h2>
    
    <button @click="$store.commit('jiajia',1)">+1</button>
    <button @click="fn1">+1</button>
    <button @click="jiajia(2)">+2</button>
    <button @click="ja(3)">+3</button>
    <button @click="jjj(3)">+3</button>


  <br>

    <button @click="$store.dispatch('jia')">3秒后+1</button>

  </div>
</template>

<script>
import { mapState ,mapMutations} from "vuex";
export default {
  computed: {
    cn() {
      return this.$store.state.n;
    },
    ...mapState(["n"]),
    ...mapState({
      nn: (state) => state.n,
    }),
  },
  methods:{
    fn1(){
      this.$store.commit('jiajia',1)
    },
    ...mapMutations(['jiajia']),
    ...mapMutations({
      "ja":(commit,n)=>commit("jiajia",n)
    }),
     ...mapMutations({
      "jjj":"jiajia"
    }),



  }

  
};
</script>

<style>
</style>
